4000-888-103

资讯动态视觉改版中组件化设计思维资讯详情

视觉改版中组件化设计思维

2019-11-26 15:06:44

 

在去年我看到《Atomic design》这篇文章 (http://atomicdesign.bradfrost.com/table-of-contents/)产生了一些不一样的思路:组件化设计思路

在我看来,组件化设计思路像是整理术,更像搭积木,在设计中把整体框架拆分为单元、个体、分子、原子。可以自由组合,也可以自由删减,可以根据不同业务组合、不同场景搭建而成。更适合多人协作达到整体统一的效果。具有完整、独立、灵活的特征。

 

图片来源:Atomic design

 

01 什么时候适合组件化思路

多人协同工作

项目中如果有2个以上设计师同时完成设计任务时,很多细节沟通靠口头沟通很容易造成时间浪费,局势一片混乱的情形。如果在多人协作前,有一套完整、统一的设计组件库,在设计中,将这些统一组件应用在设计中,将大大减少不必要的资源浪费,达到统一高效的结果。

 

产品处于什么阶段可以开始:是0-1?还是1到n的阶段?

组件化设计需要思考很全面,对细节打磨程度要求很高,对业务熟知程度较高。对于一个从0-1的产品,很多商业价值与用户价值还不够清晰,快速上线验证迭代是很重要事情。当上线后,通过验证迭代,产品达到一定成熟时机后,則需要提升用户体验,这个时候考虑完整的组件化设计是一个合适的时机。

 

02 设计流程中存在的问题

传统的设计流程是一串式的流程,从运营需求、产品需求,到需求沟通完后分配到设计,设计制作完到开发,开发完到测试上线,需要投入较多的时间与人的资源。这种设计流程现状就是在多个需求中遇到重复的业务,设计要做重复的页面设计,开发coding重复的代码,整个工作效率比较低效。总的来说这样的设计流程是:页面式的设计流程。

组件化设计流程

如果在设计前花一些时间梳理业务,场景走查,把整体框架拆分成不同的组件和元素进行重新组合定义,将大大提升工作效率,减少反复低效的工作。在制作通用组件初期,设计师需要转换角色,把自己作为一个用户,去体验线上所有的流程,建立好行为路径。并把这些场景走查与业务方沟通了解后续业务规划与方向。设计师在充分了解业务逻辑、产品的未来规划后,在设计组件时候才能考虑得更全面。在未来潜在业务出现时能复用现有规范,保持整体统一的特征。

03 如何制定组件规范

设计规范在设计团队早已成为一个行业默认的规矩了,早在谷歌、搜狐、网易已把这些规范作为一种开元的设计语言。每个设计师应该都有过参与团队中制定设计规范的经历,一般来说先定义标准颜色、辅助颜色、字体大小、导航、按钮、tab、翻页、进度条、步骤、弹窗、toast等。这一份设计规范耗费不少人力与时间。但是在实际使用中遇到不用场景、不同业务情况下复用的效率并不是太高。

组件化的设计思路則是站在业务角度,从不同场景出发。组件化设计思路要求设计师考虑的层面更全面。

组件设计需要考虑这三个层面

组件设计最大的特点就在于要考虑全局业务与场景,考虑到通用性与扩展,数据变量的情况。

使用场景层面:组合方式、尺寸大小、布局方式

业务数据变量:预售、秒杀、满减、优惠券等。

交互一致层面:选中、正常、售罄

 

 

如何做组件模块?

在做组件设计时尽量覆盖多场景为原则,更多考虑通用性与扩展。当我们找到不同场景中的共同属性内容时,这个共同属性的内容可以作为设计中通用组件,也根据不同业务需求进行布局设计。

细节设计

在具体设计中,要注重细节的打磨,比如不同业务中展示的间距变化,变量的定义,在设计中要带着人性化的思路,创新性的表达,微交互的实现。

 

组件的组合方式

组件的组合方式是灵活的,在组合需求模块时候要考虑到使用者的习惯、布局的合理性。

 

04 组件化带来的好处

灵活、标准

视觉、交互一致性

维护、替换方便

每年的设计趋势都在发生变化,市场中app的整体视觉语言也会相应发生变化,组件化设计就可以根据组件模块随时更新或者替换。

 

总结

组件化的设计思路对设计师要求是更倾向于全局性的解决方案,这种思路不仅仅可以在设计中体现,在生活中也同样可以使用的一种思维方式。他的精髓就在于:独立、灵活、可组合。例如:宜家是一家高度宣传组件的公司,宜家厨房的短视频就很好提现了组件的独立、灵活、自由组合的特点。

 

关键词:h5那个好 好看的h5页面 h5开发的网站

上一页 下一页

0
↑ 回到顶部

热门推荐

发送
//www.weibenh5.com/newhome/images/manman.png